<template>
  <div>
    <div id="link-m">
      <div class="link clear-both">
        <div class="link-title">
          <strong>尚品汇欢迎您！</strong>
          <span v-if="!name">
            请
            <router-link to="/login">登录</router-link>
            <router-link to="/register" class="clear-border"
              >免费注册</router-link
            >
          </span>
          <span v-else>
            欢迎{{ name }}
            <a @click="logout" class="clear-border">登出</a>
          </span>
        </div>
        <ul>
          <li>
            <router-link to="/">我的订单</router-link>
          </li>
          <li>
            <router-link to="/shopcart">我的购物车</router-link>
          </li>
          <li>
            <router-link to="/">我的尚品汇</router-link>
          </li>
          <li>
            <router-link to="/">尚品汇会员</router-link>
          </li>
          <li>
            <router-link to="/">企业采购</router-link>
          </li>
          <li>
            <router-link to="/">关注尚品汇</router-link>
          </li>
          <li>
            <router-link to="/">合作招商</router-link>
          </li>
          <li>
            <router-link to="/" class="clear-border">商家后台</router-link>
          </li>
        </ul>
      </div>
    </div>
    <div id="banner">
      <div class="banner-logo">
        <router-link to="/">
          <img src="../../assets/img/Logo.png" />
        </router-link>
        <h1>尚品汇</h1>
      </div>
      <form @submit.prevent="search">
        <input v-model="keyword" type="text" name="searchName" />
        <button type="submit">搜索</button>
      </form>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      keyword: "",
    };
  },
  computed: {
    ...mapState("user", ["name"]),
  },
  methods: {
    ...mapActions("user", ["logout"]),
    search() {
      const { keyword } = this;
      let obj = {
        name: "Search",
        query: this.$route.query,
      };
      if (keyword) obj.params = { keyword };
      this.$router.history.push(obj);
    },
    toLogout() {
      this.logout();
      console.log("登出");
    },
  },
};
</script>

<style></style>
